<template>
  <div class="prizes-container">
    <el-row :gutter="35" style="margin-top: 10px;">
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <el-form-item prop="name" label="学号" style="font-size: 14px;">
          <el-input v-model="state.pagenation.userCode" placeholder="请输入学号" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <el-form-item prop="code" label="姓名" style="font-size: 14px;">
          <el-input v-model="state.pagenation.userName" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <el-form-item prop="name" label="是否中奖" style="font-size: 14px;">
          <el-select v-model="state.pagenation.whetherLottery" placeholder="请选择" clearable>
            <el-option label="中奖" :value=1 />
            <el-option label="未中奖" :value=2 />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <el-form-item prop="code" label="抽奖来源" style="font-size: 14px;">
          <el-select v-model="state.pagenation.source" placeholder="请选择" clearable>
            <el-option label="免费" :value=1 />
            <el-option label="积分" :value=2 />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="35">
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <el-form-item prop="endDate" label="抽奖开始日期" style="font-size: 14px;">
          <el-date-picker style="width: 100%;" v-model="state.pagenation.startCreateDate" type="date"
            :value-format="'YYYY-MM-DD'" placeholder="请选择活动开始日期" />
        </el-form-item>
      </el-col>
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <el-form-item prop="endDate" label="抽奖结束日期" style="font-size: 14px;">
          <el-date-picker style="width: 100%;" v-model="state.pagenation.endCreateDate" type="date"
            :value-format="'YYYY-MM-DD'" placeholder="请选择活动开始日期" />
        </el-form-item>
      </el-col>
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <el-form-item prop="startDate" label="兑奖开始日期" style="font-size: 14px;">
          <el-date-picker style="width: 100%;" v-model="state.pagenation.startExchangeDate" type="date"
            :value-format="'YYYY-MM-DD'" placeholder="请选择活动开始日期" />
        </el-form-item>
      </el-col>
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <el-form-item prop="endDate" label="兑奖结束日期" style="font-size: 14px;">
          <el-date-picker style="width: 100%;" v-model="state.pagenation.endExchangeDate" type="date"
            :value-format="'YYYY-MM-DD'" placeholder="请选择活动开始日期" />
        </el-form-item>
      </el-col>
    </el-row>

    <div style="display: flex;justify-content: end;">
      <div>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="primary" @click="handleExport">导出</el-button>
      </div>
    </div>
    <div class="main">

      <el-table :data="state.historyData" stripe border style="height: 100%">
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="userCode" label="学号" />
        <el-table-column prop="userName" label="姓名" />
        <el-table-column prop="activityName" label="活动名称" />
        <el-table-column prop="prizesName" label="奖品名称" />
        <el-table-column prop="status" label="兑奖状态">
          <template #default="{ row }">
            <el-tag v-if="row.status === 0" type="warning">未兑奖</el-tag>
            <el-tag v-else type="success">已兑奖</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="抽奖时间" />
        <el-table-column prop="exchangeAt" label="领奖时间">
          <template #default="{ row }">
            {{ row.status === 1 ? row.exchangeAt : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60">
          <template v-slot="scope">
            <el-button link type="primary" size="small"
              :disabled="scope.row.prizesName === '未中奖' || scope.row.status === 1"
              @click="handleExchange(scope.row)">兑换</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
        :pager-count="5" :page-sizes="[10, 50, 200, 800]" v-model:current-page="state.pagenation.pageNum" background
        v-model:page-size="state.pagenation.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="state.pagenation.total">
      </el-pagination>
    </div>
  </div>
  <Dialog ref="dialogRef" @refresh="getHistoryTableData()" />
</template>

<script lang='ts' setup>
import { ref, reactive, defineAsyncComponent } from 'vue';
import { useHistoryExchangeApi, useHistoryPageApi } from '@/api/history';
import { ElMessage } from 'element-plus';
import { downloadFile } from '@/utils/downloadFile';
const Dialog = defineAsyncComponent(() => import("@/views/prizes/dialog.vue"))
const dialogRef = ref()
const state = reactive({
  pagenation: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    userCode: "",
    userName: "",
    whetherLottery: undefined,
    source: undefined,
    startCreateDate: '',
    endCreateDate: '',
    startExchangeDate: '',
    endExchangeDate: '',
  },
  historyData: [],
  baseUrl: import.meta.env.VITE_API_URL,
})


const getHistoryTableData = () => {
  useHistoryPageApi({ ...state.pagenation }).then(({ content: { pageNum, pageSize, list, total } }: any) => {
    state.pagenation.pageNum = pageNum;
    state.pagenation.pageSize = pageSize;
    state.pagenation.total = total;
    state.historyData = list.map((item: any) => {
      return {
        ...item,
        prizesName: item.prizesName === "" ? '未中奖' : item.prizesName
      }
    })
  })
}

const handleExchange = (row: any) => {
  useHistoryExchangeApi(row.id).then(() => {
    ElMessage.success("兑换成功");
    getHistoryTableData()
  })
}

const handleSearch = () => {
  getHistoryTableData()
}

const handleExport = () => {
  downloadFile('GET', `${state.baseUrl}/v0/history/export`, state.pagenation, '抽奖记录表')
}

// 分页改变
const onHandleSizeChange = (val: number) => {
  state.pagenation.pageSize = val;
  getHistoryTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.pagenation.pageNum = val;
  getHistoryTableData();
};

defineExpose({
  getHistoryTableData,
});
</script>
<style scoped lang='scss'>
.prizes-container {
  height: calc(100vh - 121px);

  .btn {
    padding: 10px;
    display: flex;
    align-items: center;

    .p_el_input {
      display: flex;
      align-items: center;
      width: 300px;
    }

    .lable {
      width: 80px;
    }
  }

  .main {
    padding: 10px;
    height: calc(100% - 190px);
  }

  .pagination {
    padding: 10px;

  }
}
</style>